<template>
	<view>
		<form @submit="formSubmit">
			<view class="uni-form-item">
				<view class="title">货主代码</view>
				<picker @change="handleOwnerChange" :value="ownerIndex" :range="ownerList" range-key="label" style="flex: 1;">
					<view class="uni-input border">{{ownerList[ownerIndex].label}}</view>
				</picker>
			</view>
			<view class="uni-form-item">
				<view class="title">来源货位</view>
				<view class="uni-input-container">
					<view class="uni-input-view">
						<input class="uni-input" v-model="currentLocationCode" :focus="focus[0]" @input="handleInputCurrentLocationCode" @confirm="handleConfirmLocation(constantType.current)"
						 placeholder="请扫描来源货位" />
						<image src="/static/scan.png" class="scan" @click="handleScanLocation(constantType.current)" />
					</view>
					<image src="/static/search.png" class="search" @click="handleConfirmLocation(constantType.current)" />
				</view>
			</view>
			<view class="uni-form-item">
				<view class="title">货品代码</view>
				<view class="uni-input-container">
					<view class="uni-input-view">
						<input class="uni-input" v-model="goodsCode" :focus="focus[1]" @input="handleInputGoodsCode" @confirm="handleConfirmGoodsCode"
						 placeholder="请扫描货品代码" />
						<image src="/static/scan.png" class="scan" @click="handleScanGoodsCode" />
					</view>
					<image src="/static/search.png" class="search" @click="handleConfirmGoodsCode" />
				</view>
			</view>
			<view class="uni-form-item">
				<view class="title">货品名称</view>
				<input class="uni-input border disabled" disabled v-model="goodsName" />
			</view>
			<view v-show="!!params.currentStockId">
				<view class="uni-form-item">
					<view class="title">库存量/冻结量</view>
					<input class="uni-input border disabled" disabled v-model="quantityFrozenQuantity" />
				</view>
				<view class="uni-form-item">
					<view class="title">可移动数量</view>
					<input class="uni-input border disabled" disabled v-model="params.canUserNum" />
				</view>
				<view class="uni-form-item">
					<view class="title">移动数量</view>
					<input class="uni-input border" type="number" v-model="params.moveNum" placeholder="请输入移动数量" />
				</view>
				<view class="uni-form-item">
					<view class="title">目标货位</view>
					<view class="uni-input-container">
						<view class="uni-input-view">
							<input class="uni-input" v-model="targetLocationCode" :focus="focus[2]" @input="params.targetLocationCode = null;" @confirm="handleConfirmLocation(constantType.target)"
							 placeholder="请扫描目标货位" />
							<image src="/static/scan.png" class="scan" @click="handleScanLocation(constantType.target)" />
						</view>
						<image src="/static/search.png" class="search" @click="handleConfirmLocation(constantType.target)" />
					</view>
				</view>
				<view class="uni-btn-v">
					<button type="primary" form-type="submit">移动</button>
				</view>
			</view>
		</form>
		<uni-popup ref="goodsSelect" type="bottom">
			<view class="table">
				<view class="table-head">
					<view class="th">
						<view class="td" style="flex: 1;"></view>
						<view class="td" style="flex: 3;">货品代码</view>
						<view class="td" style="flex: 3;">货品名称</view>
					</view>
				</view>
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="table-body">
						<view class="tr" v-for="item in goodsList" :key="item.id" @click="handleSelectGoods(item)">
							<view class="td" style="flex: 1;">
								<radio :checked="goodsCodeH === item.code" />
							</view>
							<view class="td" style="flex: 3;">{{item.code || '-'}}</view>
							<view class="td" style="flex: 3;">{{item.name || '-'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="currentLocationSelect" type="bottom">
			<view class="table">
				<view class="table-head">
					<view class="th">
						<view class="td" style="flex: 1;"></view>
						<view class="td" style="flex: 2;">货位代码</view>
						<view class="td" style="flex: 2;">储区代码</view>
						<view class="td" style="flex: 2;">货位状态</view>
					</view>
				</view>
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="table-body">
						<view class="tr" v-for="item in currentLocationList" :key="item.id" @click="handleSelectLocation(constantType.current, item)">
							<view class="td" style="flex: 1;">
								<radio :checked="params.currentLocationId === item.id" />
							</view>
							<view class="td" style="flex: 2;">{{item.code || '-'}}</view>
							<view class="td" style="flex: 2;">{{item.storageAreaCode || '-'}}</view>
							<view class="td" style="flex: 2;">{{item.stateLabel || '-'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="targetLocationSelect" type="bottom">
			<view class="table">
				<view class="table-head">
					<view class="th">
						<view class="td" style="flex: 1;"></view>
						<view class="td" style="flex: 2;">货位代码</view>
						<view class="td" style="flex: 2;">储区代码</view>
						<view class="td" style="flex: 2;">货位状态</view>
					</view>
				</view>
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="table-body">
						<view class="tr" v-for="item in targetLocationList" :key="item.id" @click="handleSelectLocation(constantType.target, item)">
							<view class="td" style="flex: 1;">
								<radio :checked="params.targetLocationCode === item.code" />
							</view>
							<view class="td" style="flex: 2;">{{item.code || '-'}}</view>
							<view class="td" style="flex: 2;">{{item.storageAreaCode || '-'}}</view>
							<view class="td" style="flex: 2;">{{item.stateLabel || '-'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="stockSelect" type="bottom">
			<view class="table">
				<view class="table-head">
					<view class="th">
						<view class="td" style="flex: 1;"></view>
						<view class="td" style="flex: 3;">批次号</view>
						<view class="td" style="flex: 3;">失效日期</view>
						<view class="td" style="flex: 2;">属性</view>
					</view>
				</view>
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="table-body">
						<view class="tr" v-for="item in stockList" :key="item.id" @click="handleSelectStock(item)">
							<view class="td" style="flex: 1;">
								<radio :checked="params.currentStockId === item.id" />
							</view>
							<view class="td" style="flex: 3;">{{item.receiveCargoNo || '-'}}</view>
							<view class="td" style="flex: 3;">{{item.expirationDate || '-'}}</view>
							<view class="td" style="flex: 2;">{{item.goodsAttributeName || '-'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue';

	export default {
		components: {
			uniCard
		},
		data() {
			return {
				focus: [true, false, false],
				ownerIndex: 0,
				ownerList: [{
					value: '',
					label: '请选择货主代码'
				}],
				constantType: {
					current: 'current',
					target: 'target'
				},
				params: {
					goodsId: null,
					canUserNum: 0,
					moveNum: null,
					currentStockId: null,
					currentLocationId: null,
					targetReceiveCargoNo: null,
					targetLocationCode: null
				},
				goodsList: [],
				goodsCode: null,
				goodsCodeH: null,
				currentLocationList: [],
				currentLocationCode: null,
				currentLocationCodeH: null,
				targetLocationList: [],
				targetLocationCode: null,
				stockList: [],
				goodsName: null,
				quantity: 0,
				frozenQuantity: 0
			}
		},
		computed: {
			quantityFrozenQuantity() {
				return `${this.quantity} / ${this.frozenQuantity}`;
			}
		},
		onLoad() {
			this.$api.inBill.ownerList({
				limit: 1000,
				page: 1
			}).then(res => {
				this.ownerList = res.data.map(v => {
					return {
						value: v.id,
						label: `${v.code}-${v.shortName}`
					}
				});
				this.ownerList.splice(0, 0, {
					value: '',
					label: '请选择货主代码'
				});
			});
		},
		methods: {
			handleOwnerChange(e) {
				this.ownerIndex = e.target.value;
				this.handleReset();
				this.getStockList();
			},
			handleInputCurrentLocationCode() {
				this.currentLocationCodeH = null;
				this.handleReset();
			},
			handleInputGoodsCode() {
				this.goodsCodeH = null;
				this.handleReset();
			},
			handleReset() {
				this.targetLocationCode = null;
				this.stockList = [];
				this.goodsName = null;
				this.quantity = 0;
				this.frozenQuantity = 0;
				this.params.goodsId = null;
				this.params.canUserNum = 0;
				this.params.moveNum = null;
				this.params.currentStockId = null;
				this.params.currentLocationId = null;
				this.params.targetReceiveCargoNo = null;
				this.params.targetLocationCode = null;
			},
			handleScanLocation(type) {
				this.$scan(res => {
					if (type === this.constantType.current) {
						this.currentLocationCode = res;
					} else {
						this.targetLocationCode = res;
					}
					this.handleConfirmLocation(type);
				});
			},
			handleConfirmLocation(type) {
				const code = type === this.constantType.current ? this.currentLocationCode : this.targetLocationCode;
				this.$api.common.goodsLocationList({
					page: 1,
					limit: 100,
					query: code,
					warehouseId: this.$storage.getWarehouseId()
				}).then(res => {
					if (!res.data.length) {
						uni.showToast({
							title: '未匹配到货位',
							icon: 'none'
						});
						return;
					}
					if (res.data.length === 1) {
						const _location = res.data[0];
						this.handleSelectLocation(type, _location);
					} else {
						if (type === this.constantType.current) {
							this.currentLocationList = res.data;
							this.$refs.currentLocationSelect.open();
						} else {
							this.targetLocationList = res.data;
							this.$refs.targetLocationSelect.open();
						}
					}
				});
			},
			handleSelectLocation(type, location) {
				if (type === this.constantType.current) {
					this.currentLocationCode = location.code;
					this.currentLocationCodeH = location.code;
					this.params.currentLocationId = location.id;
					setTimeout(() => {
						this.$refs.currentLocationSelect.close();
						this.currentLocationList = [];
						this.handleFocus(1);
						this.getStockList();
					}, 100);
				} else {
					this.targetLocationCode = location.code;
					this.params.targetLocationCode = location.code;
					setTimeout(() => {
						this.$refs.targetLocationSelect.close();
						this.targetLocationList = [];
						this.handleFocus();
					}, 100);
				}
			},
			handleScanGoodsCode() {
				if (!this.ownerIndex) {
					return uni.showToast({
						title: '请选择货主代码',
						icon: 'none'
					});
				}
				this.$scan(res => {
					this.goodsCode = res;
					this.handleConfirmGoodsCode();
				});
			},
			handleConfirmGoodsCode() {
				if (!this.ownerIndex) {
					return uni.showToast({
						title: '请选择货主代码',
						icon: 'none'
					});
				}
				this.$api.goods.listScan({
					ownerId: this.ownerList[this.ownerIndex].value,
					code: this.goodsCode || ''
				}).then(res => {
					if (!res.data.length) {
						uni.showToast({
							title: '未匹配到货品',
							icon: 'none'
						});
						return;
					}
					if (res.data.length === 1) {
						const _goods = res.data[0];
						this.handleSelectGoods(_goods);
					} else {
						this.goodsList = res.data;
						this.$refs.goodsSelect.open();
					}
				});
			},
			handleSelectGoods(goods) {
				this.goodsCode = goods.code;
				this.goodsCodeH = goods.code;
				this.goodsName = goods.name;
				setTimeout(() => {
					this.$refs.goodsSelect.close();
					this.goodsList = [];
					this.handleFocus();
					this.getStockList();
				}, 100);
			},
			getStockList() {
				if (this.ownerIndex && this.currentLocationCodeH && this.goodsCodeH) {
					this.$api.moveBill.appStockConditionList({
						warehouseId: this.$storage.getWarehouseId(),
						ownerId: this.ownerList[this.ownerIndex].value,
						goodsLocationCode: this.currentLocationCodeH,
						goodsCode: this.goodsCodeH
					}).then(res => {
						if (!res.data.length) {
							uni.showToast({
								title: '未匹配到库存',
								icon: 'none'
							});
							return;
						}
						if (res.data.length === 1) {
							const _stock = res.data[0];
							this.handleSelectStock(_stock);
						} else {
							this.stockList = res.data;
							this.$refs.stockSelect.open();
						}
					});
				}
			},
			handleSelectStock(stock) {
				this.goodsName = stock.goodsName;
				this.params.currentStockId = stock.id;
				this.params.targetReceiveCargoNo = stock.receiveCargoNo;
				this.params.goodsId = stock.goodsId;
				this.quantity = parseInt(stock.quantity || 0);
				this.frozenQuantity = parseInt(stock.frozenQuantity || 0);
				this.params.canUserNum = parseInt(stock.usableQuantity || 0);
				this.params.moveNum = this.params.canUserNum;
				setTimeout(() => {
					this.$refs.stockSelect.close();
					this.stockList = [];
					this.handleFocus(2);
				}, 100);
			},
			handleFocus(index) {
				this.focus.map((v, i) => this.$set(this.focus, i, false));
				index && this.$set(this.focus, index, true);
			},
			formSubmit() {
				if (!this.ownerIndex) {
					return uni.showToast({
						title: '请选择货主代码',
						icon: 'none'
					})
				}
				if (!this.params.goodsId) {
					return uni.showToast({
						title: '请选择货品',
						icon: 'none'
					})
				}
				if (!this.params.moveNum) {
					return uni.showToast({
						title: '请输入移动数量',
						icon: 'none'
					})
				}
				if (this.params.moveNum > this.params.canUserNum) {
					return uni.showToast({
						title: '移动数量不能大于可移动数量',
						icon: 'none'
					})
				}
				if (!this.params.targetLocationCode) {
					return uni.showToast({
						title: '请扫描目标货位',
						icon: 'none'
					})
				}
				if (this.currentLocationCode === this.targetLocationCode) {
					return uni.showToast({
						title: '目标货位不能和来源货位一样',
						icon: 'none'
					})
				}
				uni.showLoading({
					title: '移动中'
				});
				const params = {
					ownerId: this.ownerList[this.ownerIndex].value,
					warehouseId: this.$storage.getWarehouseId(),
					list: [this.params]
				};
				this.$api.moveBill.appSaveMoveBillCargoByGoods(params).then(() => {
					uni.hideLoading();
					uni.showToast({
						title: '移动成功',
						icon: 'success'
					});
					this.ownerIndex = 0;
					this.goodsList = [];
					this.goodsCode = null;
					this.goodsCodeH = null;
					this.currentLocationList = [];
					this.currentLocationCode = null;
					this.currentLocationCodeH = null;
					this.targetLocationList = [];
					this.targetLocationCode = null;
					this.stockList = [];
					this.goodsName = null;
					this.quantity = 0;
					this.frozenQuantity = 0;
					this.params = {
						goodsId: null,
						canUserNum: 0,
						moveNum: null,
						currentStockId: null,
						currentLocationId: null,
						targetReceiveCargoNo: null,
						targetLocationCode: null
					};
				}, () => uni.hideLoading());
			}
		}
	}
</script>
